<style>
  @import '../../assets/css/order.css';
</style>
<template>
<div>
	<div class="m-content" v-if="status==3">
		<AppHeader></AppHeader>
		<div class="warp">
			<div class="m-middle">
				<div class="m-order-tab f-cb">
					<ul>
						<li class="m-act">服务订单</li>
					</ul>
				</div>
			</div>
			<div class="orderdetails-title">
				<p><span class="triangle"></span>{{ list.serviceId }}订单详情</p>
			</div>
			<div class="m-search">
				<div class="m-search-top f-cb">
					<div class="form-glop">
						<label>姓名:</label><input type="text"  v-model="inputName"　placeholder="姓名" />
					</div>
					<div class="form-glop">
						<label>电话：</label><input type="text" v-model="inputPhone" placeholder="电话" />
					</div>
					<div class="form-glop">
						<label>高考分数:</label><input type="text" v-model="inputFraction" disabled placeholder="高考分数" />
					</div>
					<div class="form-glop">
						<label>所在省份:</label><input type="text" v-model="inputProvince" placeholder="所在省份" />
					</div>
					<div class="form-glop">
						<label>意向省份:</label><input type="text"  v-model="intentionalProvince" placeholder="意向省份"/>
					</div>
					<div class="form-glop f-fr">
						<label>意向专业:</label><input type="text"  v-model="majorMin" placeholder="意向专业" />
					</div>										
				</div>
				<div class="m-from-btn">
					<ul>
						<li v-if="list2.geography == '1'">地理</li>
						<li v-if="list2.chemistry == '1'">化学</li>
						<li v-if="list2.biology == '1'">生命科学</li>
						<li v-if="list2.physics == '1'">物理</li>
						<li v-if="list2.history == '1'">历史</li>
						<li v-if="list2.politics == '1'">政治</li>
						<li v-if="list2.technology == '1'">技术</li>
					</ul>
				</div>								
			</div>
			<div class="m-middle">
				<div class="m-middle-ad"></div>										
				<div class="m-order-tab f-cb">
					<ul>
						<li v-bind:class="{'m-act':0==index}" @click="show(0)">推荐类别：冲</li>
						<li v-bind:class="{'m-act':1==index}" @click="show(1)">推荐类别：稳</li>
						<li v-bind:class="{'m-act':2==index}" @click="show(2)">推荐类别：保</li>
					</ul>					
				</div>
				<div class="table-content f-cb">
					<table class="table-left">
						<tr>
							<th style="width:8%">省份</th>
							<th style="width:12%">学校</th>
							<th>专业</th>
						</tr>
						<tbody v-show="arr[0]">
							<tr v-for="(list,index) in list" v-if="list.recommendedLevel == '0'">
								<td style="width:8%">{{ list.provinces }}</td>
								<td style="width:12%">{{ list.school }}</td>
								<td>{{ list.professional }}</td>
							</tr>
						</tbody>
						<tbody v-show="arr[1]">
							<tr v-for="(list,index) in list" v-if="list.recommendedLevel == '1'">
								<td style="width:8%">{{ list.provinces }}</td>
								<td style="width:12%">{{ list.school }}</td>
								<td>{{ list.professional }}</td>
							</tr>
						</tbody>
						<tbody v-show="arr[2]">
							<tr v-for="(list,index) in list" v-if="list.recommendedLevel == '2'">
								<td style="width:8%">{{ list.provinces }}</td>
								<td style="width:12%">{{ list.school }}</td>
								<td>{{ list.professional }}</td>
							</tr>
						</tbody>												
					</table>
				</div>
				<div class="m-replay">
					<p class="m-replay-title" >专家评价意见</p>
					<p><textarea rows="7" cols="30" v-model="content"></textarea></p>
				</div>										
			</div>			
		</div>
		<Footer></Footer>		
	</div>	
	<div class="m-content" v-else>
		<el-dialog title="性格测试" :visible.sync="dialogTableVisible2"  @open2="open2()" width="100%">
			<iframe :src="url" width="100%" height="600"></iframe>
		</el-dialog>
		<el-dialog title="详情" :visible.sync="dialogTableVisible"  @open="open()" width="100%">
		  <el-table :data="gridData" >
		    <el-table-column property="schoolname" label="学校名称"></el-table-column>
		    <el-table-column property="alumni" label="杰出校友" width="200"></el-table-column>
		    <el-table-column property="advantage" label="优势专业" width="200"></el-table-column>
		    <el-table-column property="reasons" label="推荐理由" width="200"></el-table-column>
		    <el-table-column property="faculty" label="师资力量" width="500"></el-table-column>
		    <el-table-column property="board" label="食宿条件"></el-table-column>
		    <el-table-column property="geographic" label="地理优势"></el-table-column>
		    <el-table-column property="phone" label="电话"></el-table-column>
		    <el-table-column property="zhuanye" label="开设专业"></el-table-column>
		    <el-table-column property="province" label="省份"></el-table-column>
		    <el-table-column property="city" label="所在地市"></el-table-column>
		    <el-table-column property="college" label="院校类型"></el-table-column>
		    <el-table-column property="elevel" label="办学层次"></el-table-column>
		  </el-table>
		</el-dialog>			
		<AppHeader></AppHeader>
		<div class="warp">
			<div class="m-middle">
				<div class="m-order-tab f-cb">
					<ul>
						<li class="m-act">服务订单</li>
					</ul>
				</div>
			</div>
			<div class="orderdetails-title">
				<p><span class="triangle"></span>{{ list.serviceId }}订单详情</p>
			</div>
			<div class="m-search">
				<div class="m-search-top f-cb">
					<div class="form-glop">
						<label>姓名:</label><input type="text"  v-model="inputName"　placeholder="姓名" />
					</div>
					<div class="form-glop">
						<label>电话：</label><input type="text" v-model="inputPhone" placeholder="电话" />
					</div>
					<div class="form-glop">
						<label>高考分数:</label><input type="text" v-model="inputFraction" disabled placeholder="高考分数" />
					</div>
					<div class="form-glop">
						<label>所在省份:</label><input type="text" v-model="inputProvince" placeholder="所在省份" />
					</div>
					<div class="form-glop">
						<label>意向省份:</label><input type="text"  v-model="intentionalProvince" placeholder="意向省份"/>
					</div>
					<div class="form-glop f-fr">
						<label>意向专业:</label><input type="text"  v-model="majorMin" placeholder="意向专业" />
					</div>										
				</div>
				<div class="m-search-top f-cb">
					<div class="form-glop">
						<label>省份:</label><input type="text" v-model="tprovince" placeholder="省份" />
					</div>	
					<div class="form-glop">
						<label>城市:</label><input type="text"  v-model="tcity" placeholder="城市" />
					</div>	
					<div class="form-glop">
						<label>校名关键词:</label><input type="text"  v-model="schoolKeyword"  placeholder="校名关键词" />
					</div>
					<div class="form-glop">
						<label>专业关键词:</label><input type="text"  v-model="majorKeyword"  placeholder="专业关键词" />
					</div>											
					<div class="form-glop">
						<label>位次区间:</label>
						<input type="text"  v-model="weiciTop" placeholder="位次区间" />-
						<input type="text"  v-model="weiciLow" placeholder="位次区间" />
					</div>
					<div class="form-glop">
						<label>分数区间:</label>
						<input type="text"  v-model="fractionTop" placeholder="分数区间" />-
						<input type="text"  v-model="fractionLow" placeholder="分数区间" />
					</div>									
				</div>	
				<div class="m-search-top f-cb">
					<div class="form-glop">
						<label>考生位次:</label><input type="text" v-model="weici" placeholder="请填写考生位次" />
					</div>
					<div class="m-btn m-color f-fl"  @click="fill">确定</div>
				</div>								
				<div class="m-from-btn">
					<ul>
						<li v-if="list.geography == '1'">地理</li>
						<li v-if="list.chemistry == '1'">化学</li>
						<li v-if="list.biology == '1'">生命科学</li>
						<li v-if="list.physics == '1'">物理</li>
						<li v-if="list.history == '1'">历史</li>
						<li v-if="list.politics == '1'">政治</li>
						<li v-if="list.technology == '1'">技术</li>
					</ul>
				</div>
				<div class="m-search-top f-cb">
					<div class="m-btn m-color f-fl"  @click="test2(dialogTableVisible2 = true)">查看性格测试</div>
				</div>												
			</div>			
			<div class="m-middle">
				<div class="m-middle-ad"></div>							
				<div class="m-order-tab f-cb">
					<div class="f-fr f-cb">
						<div class="m-btn m-color"  @click="search">查询</div>
						<div class="m-btn m-color" @click="send" >发送</div>
					</div>						
				</div>
				<div class="table-content f-cb">
					<table class="table-left">
						<tr>
							<th style="width:5%">操作</th>
							<th style="width:8%">省份</th>
							<th style="width:12%">学校</th>
							<th>专业组</th>
							<th>小专业</th>
							<th>位次</th>
							<th>冲稳保</th>
							<th>查看详情</th>
						</tr>
						<tbody v-show="arr[0]">
							<tr v-for="(list,index) in tablelistc">
								<td style="width:5%"><input type="checkbox" v-model="checkedNames" :value='index' /></td>
								<td style="width:8%">{{ list.province }}</td>
								<td style="width:12%">{{ list.schoolname }}</td>
								<td>{{ list.professionalGroup }}</td>
								<td>{{ list.professionalContent }}</td>	
								<td>{{ list.weici2017 }}</td>
								<td><input type='radio'  v-model="groupName[index]" value="0">冲
									    <input type='radio'  v-model="groupName[index]" value="1">稳
									    <input type='radio'  v-model="groupName[index]" value="2">保</td>
							    <td><span class="m-btn m-color" @click="test(dialogTableVisible = true,list.schoolname)">查看更多</span></td>								
							</tr>
						</tbody>												
					</table>
				</div>
				<div class="m-replay" v-show="isshow">
					<p class="m-replay-title" @click="">专家评价意见</p>
					<p><textarea rows="7" cols="30"></textarea></p>
				</div>				
			</div>			
		</div>	
		<div class="m-online">
			<p @click="toggleShow"><img src="../../assets/images/msg.png" width="50"/></p>
			<div class="m-message-content" v-show="ifShow">
				<div class="main">
					<div class="m-message">
						<ul>
							<li v-for="(list,index) in message">
								<p class="time"><span>{{ list.time }}</span></p>
								<div class="main">
									<img :src="list.headimgurl" class="avatar" width="30" height="30" >
									<div class="text">{{ list.content }}</div>
								</div>
							</li>																											
						</ul>
					</div>
					<div class="m-text">
						<textarea placeholder="请输入回复内容" v-model="content"></textarea>
						<div class="m-message-btn" @click="sendmsg">发送</div>
					</div>
				</div>
			</div>
		</div>			
		<Footer></Footer>		
	</div>	
</div>
</template>
<script>
	import AppHeader from '@/components/Header';
	import Footer from '@/components/Footer';
	export default {
		name: 'ucenter',
		components: {
		AppHeader,
		Footer, 
	},
	data() {
		return {
			options: [],
			value5: [],
			value1: [],
			list:[],
			restaurants: [],
			state2: '',
			inputName:'',
			inputPhone:'',
			inputProvince:'',
			inputFraction:'',
			inputProject:'',
			inputPhysics:'',
			inputChemical:'',
			inputBiological:'',
			inputGeographic:'',
			inputPolitical:'',
			inputHistory:'',
			intentionalProvince:'',
			majorMin:'',
			tablelistc: [],
			tablelistw: [],
			tablelistb: [],
			groupName:[],
			arr:[true,false,false],
			index:'0',
			checkedNames:[],
			checkedNames2:[],
			checkedNames3:[],
			gridData: [],
			tablelist:[],
			message:[],
			isIf : true,
        	ifShow : false,	
        	isshow : false,
        	content:'',	
        	tprovince:'',
        	tcity:'',
        	majorKeyword:'',
        	schoolKeyword:'',
        	weiciTop:'',
        	weiciLow:'',
        	weici:'',
        	fractionTop:'',
        	fractionLow:'',	
        	status:'', 
        	list2:[],
        	url:'',
        	dialogTableVisible2: false,
        	dialogTableVisible: false,       		
		}
	},
	created(){
		var that = this;
		var status = that.$route.query.status;
		that.status =status;
		var serviceId = that.$route.query.id;
		if(status == '3'){
		that.axios.get('/yan-web/order/service/record',{params:{'serviceId':serviceId,'selectId':'3'}},{
		    headers: {
		          'Content-type': 'application/json;charset=UTF-8'
		    }
		})
		.then(function (response) {
			if(response.data.status){
				that.list =response.data.model.report.rows;
				that.list2 =response.data.model.user;
				that.inputName = response.data.model.user.name;
				that.inputPhone = response.data.model.user.phone;
				that.inputProvince = response.data.model.user.inProvince;
				that.inputFraction = response.data.model.user.fraction;
				that.inputProject = response.data.model.user.project;
				that.inputPhysics = response.data.model.user.physics;
				that.inputChemical = response.data.model.user.chemical;
				that.inputBiological = response.data.model.user.biological;
				that.inputGeographic = response.data.model.user.geographic;
				that.inputPolitical = response.data.model.user.political;
				that.inputHistory = response.data.model.user.history;
				that.intentionalProvince =  response.data.model.user.intentionalProvince;
				that.majorMin = response.data.model.user.majorMin;
				that.content = response.data.model.user.expertAdvice;
			}
		})	

		}else{
		that.axios.get('/yan-web/order/record',{params:{'serviceId':serviceId}},{
		    headers: {
		          'Content-type': 'application/json;charset=UTF-8'
		    }
		})
		.then(function (response) {
			if(response.data.status){
				that.list =response.data.model;
				that.inputName = response.data.model.name;
				that.inputPhone = response.data.model.phone;
				that.inputProvince = response.data.model.inProvince;
				that.inputFraction = response.data.model.fraction;
				that.inputProject = response.data.model.project;
				that.inputPhysics = response.data.model.physics;
				that.inputChemical = response.data.model.chemical;
				that.inputBiological = response.data.model.biological;
				that.inputGeographic = response.data.model.geographic;
				that.inputPolitical = response.data.model.political;
				that.inputHistory = response.data.model.history;
				that.intentionalProvince =  response.data.model.intentionalProvince;
				that.majorMin = response.data.model.majorMin
			}
		})

		}
		that.axios.get('/yan-web/volunteers/message/record',{params:{'serviceId':serviceId}},{
		    headers: {
		          'Content-type': 'application/json;charset=UTF-8'
		    }
		})
		.then(function(response){
		    that.message = response.data.model;
		})
   		//性格测试
		that.axios.get('/yan-web/fruit/record',{params:{'serviceId':that.$route.query.id}},{
		    headers: {
		          'Content-type': 'application/json;charset=UTF-8'
		    }
		})
		.then(function(response){
	    	that.url = response.data.model.remarks;
		})								
	},	
	methods:{
		querySearch(queryString, cb) {
			var restaurants = this.restaurants;
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
			cb(results);
		},
		createFilter(queryString) {
			return (restaurant) => {
			  return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			};
		},
		show:function(num){
			this.arr = [false,false,false];
			this.index = num;
			this.arr[num] = true;
        },				
		search:function(){
			var that = this;
			if(that.tprovince ==''){
				that.tprovince = null;
			}
			if(that.tcity ==''){
				that.tcity = null;
			}	
			if(that.majorKeyword ==''){
				that.majorKeyword = null;
			}
			if(that.schoolKeyword ==''){
				that.schoolKeyword = null;
			}
			if(that.weiciTop ==''){
				that.weiciTop = null;
			}
			if(that.weiciLow ==''){
				that.weiciLow = null;
			}
			if(that.fractionTop ==''){
				that.fractionTop = null;
			}
			if(that.fractionLow ==''){
				that.fractionLow = null;
			}																
			var str = {
				"province": that.tprovince,
				"city": that.tcity,
				"major": that.majorKeyword,
				"schoolName": that.schoolKeyword,
				"weiciTop": that.weiciTop,
				"weiciLow": that.weiciLow,
				"fractionTop": that.fractionTop,
				"fractionLow":that.fractionLow,
			};				
			var param = {'fraction':that.inputFraction,'serviceId':that.$route.query.id,condition:JSON.stringify(str)};
			that.axios.get('/yan-web/query/shanghai',{params:param},{
			    headers: {
			          'Content-type': 'application/json;charset=UTF-8'
			    }
			})
			.then(function(response){
				if(response.data.status){
					that.tablelistc = response.data.model.result;
				}
			})				
		},
		toggleShow : function(){
			this.ifShow = this.ifShow ? false : true;
			this.isIf = this.isIf ? false : true;
		},
		sendmsg:function(){
			var that = this;
			var param = {'userId':that.list.userId,'content':that.content,'serviceOrderId':that.$route.query.id};
			that.axios.post('/yan-web/volunteers/message/comment',param,{
			    headers: {
			          'Content-type': 'application/json;charset=UTF-8'
			    }
			})
			.then(function(response){
				that.message.push({'content':that.content,'headimgurl':'http://mp3.sx985.com/FpAa1rZrszho-IeJQtSzZt0dtL8Q'})
				console.log(that.content);
				that.content = '';
			})			
		},				
		send:function(){
			var that = this;
			var carr = [];
	    	var carr2 = [];
			that.checkedNames.forEach(function(item,k){
				if(that.groupName[item] == undefined){
					that.tablelistc[item].recommendedLevel = '1';
				}else{
					that.tablelistc[item].recommendedLevel = that.groupName[item];
				}
				carr.push(that.tablelistc[item]);
			});
			console.log(carr)
			carr.forEach(function(item,k){
				var caar3 = {};
				caar3.userId = that.list.userId;
				caar3.selected = '1';
				caar3.recommendedLevel = item.recommendedLevel;
				caar3.classname = '1';
				caar3.school = item.schoolname;
				caar3.professionalGroup = item.professionalGroup;
				caar3.serviceOrderId = that.$route.query.id;
				caar3.outTradeNo = that.list.outTradeNo;
				caar3.transactionId = that.list.transactionId;
				caar3.provinces = item.province;
				carr2.push(caar3)
			});
			var data = new FormData();
			var str = JSON.stringify(carr2);
			data.append('form', str);
			that.axios.post('/yan-web/order/first/selection',data,{
			    headers: {
			          'Content-Type': 'multipart/form-data'
			    }
			})
			.then(function(response){
				if(response.status){
					alert('发送成功');
				}else{
					alert('发送失败');
				}				
			})					
		},
        test:function(dialogTableVisible,name){
    		this.state2 = name;
        },
        open(){
        	var that = this;
			var param = {'schoolName':this.state2};
			that.axios.get('/yan-web/query/school/record',{params:param},{
			    headers: {
			          'Content-type': 'application/json;charset=UTF-8'
			    }
			})
			.then(function(response){
		    	that.gridData = [response.data.model];
			})	
        }, 		
        test2:function(dialogTableVisible2){
  
        }, 		
		fill:function(){
			var that = this;
    		var data = new FormData();
    		data.append('weici', that.weici);
    		data.append('serviceId', that.$route.query.id);			
			that.axios.post('/yan-web/order/add/weici',data,{
			    headers: {
			          'Content-Type': 'multipart/form-data'
			    }
			})
			.then(function(response){
				
			})			
		}				
	}, 
}
</script>